<template>
  <div class="micro-component" :style="fstyle">
    <div class="container preserve">
      <div class="stage preserve">
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="colon preserve colonS"></div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="colon preserve colonF"></div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
        <div class="number preserve" data-digit="0">
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
          <div class="line preserve translate"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "insight-3d-time",
  data() {
    return {
      runtime: null
    }
  },
  beforeCreate() { },
  created() { },
  mounted() {
    this.goTime()
  },
  // 新增生命周期，所有大屏组件都渲染完毕后触发
  onload() {
  },
  // 订阅的状态数据变更后触发,用于组件之间的相互联动
  onstate() {

  },
  computed: {
    fstyle() {
      let timeFontSize = "0.3em", width = 1010, timeDefaultColor = "#34eabc", timeDefaultShaow = "#0bfdfd", itimeSc = "#3c4444"
      try {
        if (this.config.style.width) width = this.config.style.width
        if (this.config.option.timeFontSize) timeFontSize = this.config.option.timeFontSize + 'em'
        if (this.config.option.timeDefaultColor) timeDefaultColor = this.config.option.timeDefaultColor
        if (this.config.option.timeDefaultShaow) timeDefaultShaow = this.config.option.timeDefaultShaow
        if (this.config.option.itimeSc) itimeSc = this.config.option.itimeSc
      } catch (err) {
        err
      }
      return {
        fontSize: `${Number(width) / 100}px`,
        "--time-font-size": timeFontSize,
        "--time-default-color": timeDefaultColor,
        "--time-default-shaow": timeDefaultShaow,
        "--itime-sc": itimeSc
      }
    }
  },
  methods: {
    time() {
      let timeTem = new Date();
      let a = "0";
      let b = "0";
      if (String(timeTem.getHours()).length > 1) {
        a = String(timeTem.getHours()).substring(0, 1);
        b = String(timeTem.getHours()).substring(1, 2);
      } else {
        a = "0";
        b = String(timeTem.getHours()).substring(0, 1);
      }

      let c = "0";
      let d = "0";
      if (String(timeTem.getMinutes()).length > 1) {
        c = String(timeTem.getMinutes()).substring(0, 1);
        d = String(timeTem.getMinutes()).substring(1, 2);
      } else {
        c = "0";
        d = String(timeTem.getMinutes()).substring(0, 1);
      }

      let e = "0";
      let f = "0";
      if (String(timeTem.getSeconds()).length > 1) {
        e = String(timeTem.getSeconds()).substring(0, 1);
        f = String(timeTem.getSeconds()).substring(1, 2);
      } else {
        e = "0";
        f = String(timeTem.getSeconds()).substring(0, 1);
      }
      return [a, b, c, d, e, f];
    },
    goTime() {
      let numbers = document.getElementsByClassName("number")
      this.runtime = setInterval(() => {
        let arr = this.time();
        Array.prototype.slice.call(numbers).forEach((key, index) => {
          key.setAttribute("data-digit", arr[index]);
        });
      }, 1000);
    },
  },
  beforeDestroy() {
    // 删除定时器，第三方创建的Dom等……，防止内存泄漏
    clearInterval(this.runtime)
  },
  props: {
    config: {
      type: Object,
      default() {
        return {
          style: {},
          option: {},
          data: []
        }
      }
    }
  },
  // 声明默认配置
  $default: {
    // 初始化组件大小
    style: {
      width: 1010,
      height: 128
    },
    // 组件基础配置信息，可渲染成表单在insight右侧让用户自定义，可从 this.config.option 中获取值
    form: [
      {
        key: "timeDefaultColor",
        name: "字体颜色",
        type: "color",
        default: "#34eabc"
      },
      {
        key: "timeDefaultShaow",
        name: "字体光圈",
        type: "color",
        default: "#0bfdfd"
      },
      {
        key: "itimeSc",
        name: "阴影",
        type: "color",
        default: "#3c4444"
      },
      {
        key: "timeFontSize",
        name: "字体大小",
        type: "number",
        default: 0.3,
        min: 0.1,
        max: 10,
        step: 0.1
      },
    ],
    // 声明默认数据，可从this.config.data 中获取当前最新数据, 默认是数组，因为从数据库查询的数据都是以数组的形式返回
    data: [],
    // 声明默认的事件，以及事件触发时的参数中，对外提供配置，从而绑定全局状态的属性
    event: [{
      name: "click",
      comment: "点击事件",
      binders: [
        { name: "value", comment: "当前时间", prop: "value", state: null },
      ],
    }],
  }
};
</script>

<style lang="scss" scoped>
.micro-component {
  // 字体大小
  --time-font-size: 0.3em;
  --time-default-color: #34eabc;
  --time-default-shaow: #0bfdfd;
  --itime-sc: #3c4444;

  /* 设置视距1000px 子元素在3D中变换  */
  .preserve {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  /* 容器 */
  .container {
    position: relative;
    text-align: center;
  }

  /* 舞台 */
  .stage {
    transform: rotateX(10deg) rotateZ(0);
    /* animation: rotate 10s infinite linear; */
  }

  /* 数字样式  */
  .number {
    position: relative;
    width: 3em;
    height: 12em;
    display: inline-block;
    margin: 3em 3em 0 0;
  }

  .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: var(--time-font-size);
    background: #181919;
  }

  .line::before,
  .line::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--time-default-color);
    box-shadow: 0 0 1em var(--time-default-shaow), inset 0 0 0.125em var(--time-default-shaow);
  }

  .line::before {
    left: 0;
    transition: all 0.5s ease-in;
  }

  .line::after {
    right: 0;
    transition: all 0.5s ease-out;
  }

  /* 计算每根线的位置 */
  .line:nth-child(1) {
    top: -0.2em;
  }

  .line:nth-child(2) {
    top: 3.2em;
  }

  .line:nth-child(3) {
    top: 6.6em;
  }

  .line:nth-child(4) {
    transform: rotate(90deg) translateY(0.2em);
    /* 设置 旋转中心为 最左边 元素中点  */
    transform-origin: 0 center;
  }

  .line:nth-child(5) {
    transform: rotate(-90deg) translateY(0.2em);
    /* 设置 旋转中心为 最右边 元素中点  */
    transform-origin: 100% center;
  }

  .line:nth-child(6) {
    top: 3.4em;
    transform: rotate(90deg) translateY(0.2em);
    transform-origin: 0 center;
  }

  .line:nth-child(7) {
    top: 3.4em;
    transform: rotate(-90deg) translateY(0.2em);
    transform-origin: 100% center;
  }

  /* 减少我们的距离 实现阴影效果 */
  .translate::before,
  .translate::after {
    transform: translateZ(50px);
  }

  .number[data-digit="1"] .line:nth-child(1)::before,
  .number[data-digit="1"] .line:nth-child(1)::after,
  .number[data-digit="1"] .line:nth-child(2)::before,
  .number[data-digit="1"] .line:nth-child(2)::after,
  .number[data-digit="1"] .line:nth-child(3)::before,
  .number[data-digit="1"] .line:nth-child(3)::after,
  .number[data-digit="1"] .line:nth-child(4)::before,
  .number[data-digit="1"] .line:nth-child(4)::after,
  .number[data-digit="1"] .line:nth-child(6)::before,
  .number[data-digit="1"] .line:nth-child(6)::after,

  .number[data-digit="2"] .line:nth-child(4)::before,
  .number[data-digit="2"] .line:nth-child(4)::after,
  .number[data-digit="2"] .line:nth-child(7)::before,
  .number[data-digit="2"] .line:nth-child(7)::after,

  .number[data-digit="3"] .line:nth-child(4)::before,
  .number[data-digit="3"] .line:nth-child(4)::after,
  .number[data-digit="3"] .line:nth-child(6)::before,
  .number[data-digit="3"] .line:nth-child(6)::after,

  .number[data-digit="4"] .line:nth-child(1)::before,
  .number[data-digit="4"] .line:nth-child(1)::after,
  .number[data-digit="4"] .line:nth-child(3)::before,
  .number[data-digit="4"] .line:nth-child(3)::after,
  .number[data-digit="4"] .line:nth-child(6)::before,
  .number[data-digit="4"] .line:nth-child(6)::after,

  .number[data-digit="5"] .line:nth-child(5)::before,
  .number[data-digit="5"] .line:nth-child(5)::after,
  .number[data-digit="5"] .line:nth-child(6)::before,
  .number[data-digit="5"] .line:nth-child(6)::after,

  .number[data-digit="6"] .line:nth-child(5)::before,
  .number[data-digit="6"] .line:nth-child(5)::after,

  .number[data-digit="7"] .line:nth-child(2)::before,
  .number[data-digit="7"] .line:nth-child(2)::after,
  .number[data-digit="7"] .line:nth-child(3)::before,
  .number[data-digit="7"] .line:nth-child(3)::after,
  .number[data-digit="7"] .line:nth-child(4)::before,
  .number[data-digit="7"] .line:nth-child(4)::after,
  .number[data-digit="7"] .line:nth-child(6)::before,
  .number[data-digit="7"] .line:nth-child(6)::after,

  .number[data-digit="9"] .line:nth-child(6)::before,
  .number[data-digit="9"] .line:nth-child(6)::after,

  .number[data-digit="0"] .line:nth-child(2)::before,
  .number[data-digit="0"] .line:nth-child(2)::after {
    transform: translateZ(25px);
    background: var(--itime-sc);
    box-shadow: 0 0 1em var(--itime-sc);
  }

  .colon {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 12em;
    margin: 1em 2em 0 0;
    animation: colonFra 1s linear infinite;
  }

  .colon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    background-color: var(--time-default-color);
    border-radius: 50%;
  }

  .colon::after {
    content: "";
    position: absolute;
    top: 4em;
    left: 0;
    width: 1em;
    height: 1em;
    background-color: var(--time-default-color);
    border-radius: 50%;
  }

  .colonS {
    left: -1.3em;
  }

  .colonF {
    left: 1em;
  }

  @keyframes colonFra {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}
</style>
